<template>
    <view class="header">
      <view class="header-left" @click="handleBack" v-if="showBack">
        <text class="header-icon">←</text>
      </view>
      <view class="header-title">{{ title }}</view>
      <view class="header-right">
        <slot name="right"></slot>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    name: 'AppHeader',
    props: {
      title: {
        type: String,
        default: '驾校报名系统'
      },
      showBack: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      handleBack() {
        this.$emit('back');
        uni.navigateBack();
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .header {
    position: relative;
    display: flex;
    align-items: center;
    height: 90rpx;
    background-color: #3c8dbc;
    color: #fff;
    padding: 0 30rpx;
  }
  
  .header-left {
    position: absolute;
    left: 30rpx;
    top: 0;
    height: 90rpx;
    display: flex;
    align-items: center;
  }
  
  .header-icon {
    font-size: 36rpx;
  }
  
  .header-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .header-right {
    position: absolute;
    right: 30rpx;
    top: 0;
    height: 90rpx;
    display: flex;
    align-items: center;
  }
  </style>